<template>
  <div class="productionDesign_box myStyle danji">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          单机设备监控
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_center">
        <StrokeTitle title="机械臂" class="float margin" style="width: 38.3%" :isCenter="true">
          <img src="../../assets/images/20211026144113.png" alt="">
          <div class="jxb_right flex_center">
            <div class="left">
              <div class="big_cir flex_center">
                <div class="small_cir"></div>
              </div>
              <div class="and"></div>
              <div class="big_cir flex_center big_cir_blue">
                <div class="small_cir small_cir_blue"></div>
              </div>
            </div>
            <div class="right">
              <div class="item flex_between">
                <div class="title">
                  当前设备运行状态
                </div>
                <div class="number">维护中</div>
              </div>
              <div class="item item_blue flex_between">
                <div class="title">
                  当日产量
                </div>
                <div class="number">{{22}}次</div>
              </div>
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle title="设备状态" class="float margin" style="width: 29.3%" url="/">
          <div class="table_box" ref="table1">
            <div class="status_box flex_center">
              <div class="lable">设备状态</div>
              <div class="status">进行中</div>
            </div>
            <el-table :data="top3" :height="height1" border style="width: 100%" :header-cell-style="{background:'#125496 !important'}">
              <el-table-column prop="value1" align="center" label="设备参数">
              </el-table-column>
              <el-table-column prop="value2" align="center" label="设备参数值">
              </el-table-column>
            </el-table>
          </div>
        </StrokeTitle>
        <StrokeTitle title="设备信息" class="float margin" style="width: 29.4%" url="/">
          <div class="table_box" ref="table2">
            <el-table :data="top3" :height="height2" border style="width: 100%" :header-cell-style="{background:'#125496 !important'}">
              <el-table-column prop="value1" align="center" label="铭牌信息">
              </el-table-column>
              <el-table-column prop="value2" align="center" label="铭牌信息值">
              </el-table-column>
            </el-table>

          </div>
        </StrokeTitle>
      </div>
      <div class="content_bottom">
        <StrokeTitle class="float margin" style="width: 99%">
          <div class="table_box" ref="table3">
            <el-table :data="bottom" :height="height3" border style="width: 100%" :header-cell-style="{background:'#125496 !important'}" :row-class-name="tableRowClassName">
              <el-table-column prop="value1" align="center" label="报警描述">
              </el-table-column>
              <el-table-column prop="value2" align="center" label="报警时间">
              </el-table-column>
              <el-table-column prop="value3" align="center" label="报警值">
              </el-table-column>
              <el-table-column prop="value4" align="center" label="报警限值">
              </el-table-column>
              <el-table-column prop="value5" align="center" label="报警等级">
              </el-table-column>
            </el-table>

          </div>
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
import TwoRow from "@/components/echarts/bar/twoRow.vue";
import { formatDate } from "@/utils/index";
export default {
  components: {
    TwoRow,
  },
  data() {
    return {
      model: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      timer: null, //定时器
      formatDate: "", //当前时间
      height1: 100, //设备状态表格高度
      height2: 100, //设备信息表格高度
      height3: 100, //设备信息表格高度
      btnList: [
        {
          id: 1,
          title: "报警信息",
          img: require("@/assets/images/echarts/baojing.png"),
        },
        {
          id: 2,
          title: "数据统计",
          img: require("@/assets/images/echarts/tongji.png"),
        },
      ],
      btnValue: 1,
      //设备信息
      top3: [
        {
          value1: "2016-05-03",
          value2: "王小虎",
        },
        {
          value1: "2016-05-02",
          value2: "王小虎",
        },
        {
          value1: "2016-05-04",
          value2: "王小虎",
        },
        {
          value1: "2016-05-01",
          value2: "王小虎",
        },
        {
          value1: "2016-05-08",
          value2: "王小虎",
        },
        {
          value1: "2016-05-01",
          value2: "王小虎",
        },
        {
          value1: "2016-05-08",
          value2: "王小虎",
        },
      ],
      bottom: [
        {
          value1: "2016-05-03",
          value2: "王小虎",
          value3: "wr2332",
          value4: "1223",
          value5: "1223",
        }
      ],
    };
  },
  methods: {
    radioChange() {},
    //表格自适应高度
    getAutoHeight() {
      this.$nextTick(() => {
        clearTimeout(settimeout);
        var settimeout = setTimeout(() => {
          try {
            var table1 = this.$refs.table1.offsetHeight;
            var table2 = this.$refs.table2.offsetHeight;
            var table3 = this.$refs.table3.offsetHeight;
            this.height1 = table1 - 72 + "px";
            this.height2 = table2 - 40 + "px";
            this.height3 = table3 - 40 + "px";
          } catch (e) {
            console.log(e);
          }
        }, 100);
      });
    },
    //表格奇偶数
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "even";
      }
      return "";
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  created() {
    // console.log(1, formatDate(new Date()));
    this.timer = setInterval(() => {
      this.formatDate = formatDate(new Date());
    }, 1000);
  },
  mounted() {
    //表格自适应高度
    this.getAutoHeight();
    window.onresize = () => {
      this.getAutoHeight();
    };
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_top,
    .content_bottom,
    .content_center {
      width: 100%;
      height: 45.1%;
    }
    .content_center {
      .jxb_right {
        width: 260px;
        height: 150px;
        margin-left: 30px;
        // background: red;
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          .big_cir {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #086088;
            .small_cir {
              width: 22px;
              height: 22px;
              border-radius: 50%;
              border: 2px solid #02d5c2;
            }
          }
          .big_cir_blue {
            border: 1px solid #105b95;
            .small_cir_blue {
              border: 2px solid #1c9ad5;
            }
          }
          .and {
            width: 2px;
            height: 20px;
            margin: 8px 0;
            background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -webkit-gradient(
              linear,
              left top,
              left bottom,
              color-stop(0%, #02d5c2),
              color-stop(100%, #1c9ad5)
            );
            background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
          }
        }
        .right {
          .item {
            width: 220px;
            height: 52px;
            border: 1px solid #086088;
            margin: 20px 10px;
            padding: 0 20px;
            .title,
            .number {
              font-size: 14px;
              color: #00ebcd;
            }
            .number {
              font-weight: 700;
            }
          }
          .item_blue {
            border: 1px solid #105b95;
            .title,
            .number {
              color: rgba(35, 195, 255, 1);
            }
          }
        }
      }
      .table_box {
        height: 100%;
        width: 100%;
        // background: red;
        padding: 20px;
        .status_box {
          width: 50%;
          height: 32px;
          background: rgba(36, 104, 160, 0.5);
          .lable,
          .status {
            width: 84px;
            height: 32px;
            background: #0163ac;
            border: 1px solid rgba(0, 156, 255, 0.52);
            color: #ffffff;
            text-align: center;
            font-size: 13px;
            line-height: 32px;
            letter-spacing: 1px;
          }
          .status {
            width: 80%;
            color: #3bffe6;
            background: none;
            border: 0px solid rgba(0, 156, 255, 0.52);
          }
        }
      }
    }
    .content_bottom {
      height: 50%;
      .table_box {
        height: 100%;
        width: 100%;
        // background: red;
        padding: 20px;
      }
    }
    .Echarts {
      height: calc(100% - 50px);
    }
  }
}
</style>
<style lang="scss">
.danji {
  .el-table .cell {
    height: 34px !important;
    line-height: 34px;
  }
  .el-table--border th,
  .el-table--border td {
    background: none !important;
    border-right: none;
  }
  .el-table .even {
    background: #0d4581 !important;
  }
}
</style>